<!--
 * @Description: 上传工作量
 * @Author: 晋龍
 * @Date: 2023-01-12 19:15:38
 * @LastEditors: 晋龍
 * @LastEditTime: 2023-02-21 20:54:47
-->
<template>
  <div class="main">
    <!-- AppBar导航栏 -->
    <var-app-bar title="上传工作量" title-position="center" color="rgb(244,245,249)" text-color="rgb(102,106,119)"
      class="reporting">
      <template #left>
        <var-button color="transparent" text-color="rgb(102,106,119)" round text @click="onBack">
          <var-icon name="chevron-left" :size="30" class="reporting" />
        </var-button>
      </template>
    </var-app-bar>

    <!-- 课程表单 -->
    <div class="courseForm">

      <!-- 课程 -->
      <div class="courseName">
        <span class="courseName1">课程</span>
        <div class="courseRight" >
          <!-- <select style="width:100px;margin-right:10px" class="courseName2" v-model="formData.courseName" required name="courseName" >
            <option :value="lessonList.name">{{ lessonList.name }}</option>
          </select> -->
          <var-select  class="courseName2" style="width:120px; margin-right:10px;text-line:10px" v-model="formData.courseName" required name="courseName">
            <var-option v-for="(i,index) in lessonList" :label="i.name"/>
          </var-select>
          <!-- <input class="courseName2" type="text" v-model="formData.courseName" required name="courseName" placeholder="请填写"/> -->
          <!-- <span class="courseNameIcon">
            <var-icon name="chevron-right" :size="24" class="courseNameIcon" />
          </span> -->
        </div>
      </div>
      <var-divider class="divider" />

      <!-- 课程类别 -->
      <!-- <div class="courseName">
        <span class="courseName1">课程类别</span>
        <div class="courseRight">
          <input  class="courseName2" type="text" v-model="formData.courseSort" required name="courseName" placeholder="请填写"/>

          <span class="courseNameIcon">
            <var-icon name="chevron-right" :size="24" class="courseNameIcon" />
          </span>
        </div>
      </div>
      <var-divider class="divider" /> -->

      <!-- 总学时 -->
      <div class="courseName">
        <span class="courseName1">总学时</span>
        <div class="courseRight">
          <input   class="courseName2" type="text" v-model="formData.totalClass" required name="courseName" placeholder="请填写"/>
          <span class="courseNameIcon">
            <var-icon name="chevron-right" :size="24" class="courseNameIcon" />
          </span>
        </div>
      </div>
      <var-divider class="divider" />

      <!-- 理论学时 -->
      <div class="courseName">
        <span class="courseName1">理论学时</span>
        <div class="courseRight">
          <input   class="courseName2" type="text" v-model="formData.theoryXs" required name="courseName" placeholder="请填写"/>
          <span class="courseNameIcon">
            <var-icon name="chevron-right" :size="24" class="courseNameIcon" />
          </span>
        </div>
      </div>
      <var-divider class="divider" />

      <!-- 实验学时 -->
      <div class="courseName">
        <span class="courseName1">实验学时</span>
        <div class="courseRight">
          <input   class="courseName2" type="text" v-model="formData.experXs" required name="courseName" placeholder="请填写"/>
          <span class="courseNameIcon">
            <var-icon name="chevron-right" :size="24" class="courseNameIcon" />
          </span>
        </div>
      </div>
    </div>

    <!-- 理论课时 -->
    <div class="lilun">
      <span class="lilunLeft">
        <p class="lilunText">理论课时</p>
      </span>
      <!-- <span class="lilunRight">
        <p class="lilunNum" v-if="formData.theoryXs">{{ formData.theoryXs }}</p>
        <p class="lilunNum" v-else>-</p>
        <p class="lilunkeshi">课时</p>
      </span> -->

    </div>
    <!-- 理论课时课程表单 -->
    <div class="courseForm">

      <!-- 上课班级 -->
      <div class="courseName">
        <span class="courseName1">上课班级</span>
        <div class="courseRight">
          <input  class="courseName2" type="text" v-model="formData.class" required name="courseName" placeholder="请填写"/>
          <span class="courseNameIcon">
            <var-icon name="chevron-right" :size="24" class="courseNameIcon" />
          </span>
        </div>
      </div>
      <var-divider class="divider" />

      <!-- 课时 -->
      <div class="courseName">
        <span class="courseName1">课时</span>
        <div class="courseRight">
          <input   class="courseName2" type="text" v-model="formData.theoryKs" required name="courseName" placeholder="请填写"/>
          <span class="courseNameIcon">
            <var-icon name="chevron-right" :size="24" class="courseNameIcon" />
          </span>
        </div>
      </div>
    </div>

    <!-- 实验课时 -->
    <div class="lilun">
      <span class="lilunLeft">
        <p class="lilunText">实验课时</p>
      </span>
      <!-- <span class="lilunRight">
        <input class="lilunNum" v-if="formData.laboratoryHours"   v-bind="formData.laboratoryHours">{{ formData.laboratoryHours }}</p>
        <p class="lilunNum" v-else>-</p>
        <p class="lilunkeshi">课时</p>
      </span> -->

    </div>
    <!-- 理论课时课程表单 -->
    <div class="courseForm">

      <!-- 上课班级 -->
      <div class="courseName">
        <span class="courseName1">上课班级</span>
        <div class="courseRight">
          <input   class="courseName2" type="text" v-model="formData.class" required name="courseName" placeholder="请填写"/>
          <span class="courseNameIcon">
            <var-icon name="chevron-right" :size="24" class="courseNameIcon" />
          </span>
        </div>
      </div>
      <var-divider class="divider" />

      <!-- 课时 -->
      <div class="courseName">
        <span class="courseName1">课时</span>
        <div class="courseRight">
          <input   class="courseName2" type="text" v-model="formData.experKs" required name="courseName" placeholder="请填写"/>
          <span class="courseNameIcon">
            <var-icon name="chevron-right" :size="24" class="courseNameIcon" />
          </span>
        </div>
      </div>
    </div>

    <!-- 提交表单 -->
    <div class="submitForm">
      <div class="submitText">
        <div class="bottomLeft">
          <div class="numSum">{{ Number(formData.theoryKs) + Number(formData.experKs)}}</div>
          <div class="textSum">总课时</div>
        </div>
        <div class="submitBtn">
          <var-button text-color="white" size="large" @click="onSubmit">提交</var-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup >
import { reactive, ref,toRaw,watch,onMounted } from "vue";
import router from "@/router";
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user'
import { workTImeStore } from '@/stores/workload';
import { useExamStore } from '@/stores/exam';
import { useRoute } from 'vue-router'
const workStore = workTImeStore()
const userStore = useUserStore()
const ExamStore = useExamStore()
const {lessonList } = storeToRefs(ExamStore)

const {workTime } = storeToRefs(workStore)
const { user } = storeToRefs(userStore)
const { LessonList } = ExamStore
const { workTimeAllGet,workTimeAdd} = workStore
const { getuser } = userStore
const route = useRoute()
const userId = route.query.id
const lesson = ref([])
const getLesson = async() =>{
  // 获取用户信息
  await getuser()
  // 获取课程信息
  await LessonList()
}
getLesson()
const Id = ref("")

const formData = reactive({
  courseName: "", //课程名
    courseSort:"",  //课程类别
    totalClass:"",  //总学时
    theoryKs:"",//理论课时
    experKs:"",// 实验课时
    theoryXs:"",//理论学时
    experXs:"",//实验学时
    totalClassHours:"",//总课时
    class:"",//上课班级
});
// formData.detail.totalClassHours = String(Number(formData.detail.theoryKs) + Number(formData.detail.experKs))
const onBack = () => router.push("/myWorkload");
// 提交表单
const onSubmit = () =>{
  formData.totalClassHours = String(Number(formData.theoryKs) + Number(formData.experKs))
  // console.log(formData.totalClassHours);
  console.log(toRaw(lessonList.value)[1].name);
  for(let i = 0; i < lessonList.value.length; i++){
    if(lessonList.value[i].name == formData.courseName){
      Id.value = toRaw(lessonList.value)[i].id
      break;
    }
  }
  // toRaw(lessonList.value).forEach(el => {
  //   if(toRaw(lessonList.value)[el].name == formData.courseName){
  //     Id.value = toRaw(lessonList.value)[el].id
  //   }
  // });
  console.log(Id.value);
  let courseId = Id.value
  let experKs = formData.experKs
  let experXs = formData.experXs
  let grade = formData.class
  let theoryKs = formData.theoryKs
  let theoryXs = formData.theoryXs
  const totalKs = formData.totalClassHours 
  console.log(courseId,experKs,experXs,grade,theoryKs,theoryXs,totalKs,userId);
  workTimeAdd(courseId,experKs,experXs,grade,theoryKs,theoryXs,totalKs,userId);
  router.push('/myWorkload')
}
</script>

<style scoped lang="less">
.main {
  background: rgb(244, 245, 249);
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;

  .reporting {
    font-weight: bolder;
    font-size: larger;
  }

  .courseForm {
    background: rgb(255, 255, 255);
    overflow: auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 5px;
    border-radius: 20px;

    /* 课程 */
    .courseName {
      margin: 15px 0 15px 10px;
      .courseName1 {
        padding-top: 10px;
        color: rgb(180, 174, 174);
      }

      .courseRight {
        float: right;

        .courseName2 {
          float: left;
          border: none;
          outline: none;
          height: 30px;
          font-size: large;
          width: 200px;
          text-align: right;
          --select-line-size:0px;
          --select-chip-margin:0px;
          --selsct-select-padding:0px;
          --select-placeholder-size:0px;
        }

        .courseNameIcon {
          float: right;
        }
      }
    }


    .divider {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333;
      margin-top: 10px;
      padding-top: 10px;
    }
  }

  .lilun {
    margin-left: 20px;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-right: 20px;

    .lilunLeft {
      float: left;

      .lilunText {
        display: inline;
        font-size: larger;
        font-weight: bold;
        color: #333;
      }
    }

    .lilunRight {
      float: right;

      .lilunNum {
        font-size: larger;
        display: inline;
        font-weight: bold;
        margin-right: 5px;
      }

      .lilunkeshi {
        display: inline;
        font-weight: lighter;
        font-size: small;
      }
    }

  }

  .submitForm {
    height: 90px;
    line-height: 90px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgb(255, 255, 255);
    .submitText{
      .bottomLeft{
        float: left;
        padding: 0 20px;
        .numSum{
          display: inline;
          font-size: 32px;
          font-weight: bolder;
          
        }
        .textSum{
          display: inline;
          font-size: small;
          padding: 0 10px;
        }
      }
      .submitBtn{
        float: right;
        padding: 0 20px;
        --button-default-color:rgb(38, 89, 247);
        --button-border-radius:20px;
      }
    }
  }
}
</style>
